package com.dji.compose_learning.ui.view

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Done
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun EffectView() {
    val scaffoldState = rememberScaffoldState()
    val state = remember {
        mutableStateOf(false)
    }
    val coroutineScope = rememberCoroutineScope()

    LaunchedEffect(state.value) {
        scaffoldState.snackbarHostState.showSnackbar("Launched Effect Run",
            "LaunchedEffect",
            SnackbarDuration.Short)
    }
    Scaffold(topBar = {
        TopAppBar(modifier = Modifier.fillMaxWidth()) {
            Row(modifier = Modifier.fillMaxWidth()) {
                Icon(imageVector = Icons.Default.Menu, contentDescription = "",
                    modifier = Modifier.clickable {
                        coroutineScope.launch { scaffoldState.drawerState.open() }
                    })
                Spacer(modifier = Modifier.width(10.dp))
                Text(text = "show snackbar", color = MaterialTheme.colors.onPrimary)
            }
        }
    }, scaffoldState = scaffoldState,
        drawerContent = {
            Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colors.background) {
                Text(text = "here is drawer content area.",
                    modifier = Modifier.background(MaterialTheme.colors.primary),
                    color = MaterialTheme.colors.onPrimary,
                    textAlign = TextAlign.Center)
            }
        },
        floatingActionButton = {
            Surface(shape = CircleShape, elevation = 2.dp,
                modifier = Modifier.size(40.dp),
                color = MaterialTheme.colors.primary) {
                Icon(imageVector = Icons.Default.Done,
                    contentDescription = "",
                    modifier = Modifier.clickable {
                        coroutineScope.launch {
                            scaffoldState.snackbarHostState.showSnackbar("float button clicked.",
                                "CoroutineScope")
                        }
                    })
            }
        }, content = { paddingValues ->
            Column(modifier = Modifier.padding(paddingValues)) {
                Button(onClick = {
                    state.value = !state.value
                }) {
                    Text(text = "check effect", color = MaterialTheme.colors.onPrimary)
                }

                Button(onClick = {
                    coroutineScope.launch {
                        scaffoldState.snackbarHostState.showSnackbar("Launched Effect Run",
                            "Not LaunchedEffect")
                    }

                }) {
                    Text(text = "show snackbar 2", color = MaterialTheme.colors.onPrimary)
                }
            }
        })
}
















